<script setup>
import {reactive, ref,h,nextTick,computed,onMounted} from "vue"
import { NButton, NTag } from 'naive-ui'
import api from '@/api'

let pagination = reactive({
  limit: 10,
  page: 1,
  itemCount: 0
})
let showModal = ref(false)
let formModel = ref({
  username: "",
  password: "",
  nickname: "",
  fullname: "",
  department: "",
  phone: "",
  position: "",
  status: 1,
  role_id: 1
})
let statusOptions = reactive([
  {label: "正常", value: 1},
  {label: "禁用", value: 2}
])
let roleOptions = reactive([
  {id: 1, name:"超级管理员"},
  {id: 2, name:"管理员"}
])
let tableCols = reactive([
  {title: 'ID',key: 'id'},
  {title: "用户名",key: "username"},
  {title: '昵称',key: 'nickname'},
  {title: '姓名',key: 'fullname'},
  {title: "电话",key: "phone"},
  {title: "部门", key: "department"},
  {title: "职位", key: "position"},
  {title: "所属角色", key: "belonging_role"},
  {title: "状态", key: "status", render(row){
    return h(NTag,{round:true,bordered:false, strong: true, tertiary: true,type:(row.status == 0 ? 'error' : 'success')},{default: () => (row.status == 0 ? '禁用':'正常')})
  }},
  {title: "操作", key: "operate",render(row){
    return [
      h(
        NButton,{strong: true, tertiary: true, type:'info', size: 'small', onClick: () => handleDisable(row)}, {default: () => '修改'},
      ),
      h(
        NButton,{strong: true, tertiary: true, type:'error',style: 'margin-left: 15px;', size: 'small', onClick: () => handleDisable(row)}, {default: () => '删除'},
      ),
      h(
        NButton,{strong: true, tertiary: true, type:'info',style: 'margin-left: 15px;', size: 'small', onClick: () => handleDisable(row)}, {default: () => '重置密码'},
      )
    ]
  }}
])
let tableData = ref([])
let formValue = ref({
  username: "",
  status: null
})

// 禁用
const handleDisable = (row) => {
  console.log(row)
}

let rowProps = (row) => {
  return {
    onContextmenu: (e) => {
      message.info(JSON.stringify(row, null, 2))
      e.preventDefault()
      showDropdown.value = false
      nextTick().then(() => {
        showDropdown.value = true
        dropdown.x.value = e.clientX
        dropdown.y.value = e.clientY
      })
    }
  }
}
// 分页查询
let getPage = (query) => {
  api.manage.manageUserPage(query).then(
    (resp) => {
      tableData.value = resp.data.list
      pagination.page = resp.data.paginator.page
      pagination.itemCount = resp.data.paginator.total
    }
  )
}
// 切换分页
let handlePagination = (page) => {
  pagination.page = page
  getPage(pagination)
}
// 新增用户弹窗
let handleShowModalOK = () => {
  showModal.value = true
}
// 关闭新增用户弹窗
let handleShowModalClose = () => {
  formModel.value.username = ""
  formModel.value.password = ""
  formModel.value.nickname = ""
  formModel.value.fullname = ""
  formModel.value.department = ""
  formModel.value.phone = ""
  formModel.value.position = ""
  formModel.value.status = 1
  formModel.value.position = 1
  showModal.value = false
}
// 确定新增用户
let handleAdd = () => {
  api.manage.manageUserAdd(formModel.value).then(
    (resp) => {
      console.log(resp)
      if(resp.code == 200){
        showModal.value = false
        getPage(pagination)
      }
    }
  )
}
onMounted(() => {
  getPage(pagination)
})
</script>

<template>
  
  <CommonPage :show-footer="true">
    <template #action>
      <div>
        <n-button type="primary" secondary>
          <TheIcon icon="mdi:download" :size="18" class="mr-5" />
          导出用户
        </n-button>
        <n-button @click="handleShowModalOK" type="primary" class="ml-16">
          <TheIcon icon="material-symbols:add" :size="18" class="mr-5" />
          新增用户
        </n-button>
      </div>
    </template>
    <n-space vertical size="large">
      <n-form ref="formRef" inline label-placement="left" label-width="auto" :model="formValue">
          <n-grid :cols="24" :x-gap="24">
            <n-form-item-gi :span="6" label="后台用户">
              <n-input v-model:value="formValue.username" placeholder="用户名" />
            </n-form-item-gi>
            <n-form-item-gi :span="6" label="角色">
              <n-select v-model:value="formValue.status" :options="statusOptions" placeholder="请选择" />
            </n-form-item-gi>
            <n-form-item-gi :span="6" label="状态">
              <n-select v-model:value="formValue.status" :options="statusOptions" placeholder="请选择" />
            </n-form-item-gi>
            <n-form-item-gi :span="6">
              <n-button strong secondary type="tertiary">
                查询
              </n-button>
            </n-form-item-gi>
          </n-grid>
        </n-form>
      <n-data-table
        bordered
        :columns="tableCols"
        :data="tableData"
        :row-props="rowProps"
      />
      <div style="display:flex;flex-direction: row;justify-content: flex-end;">
        <n-pagination
          v-model:page="pagination.page"
          v-model:page-size="pagination.limit"
          :item-count="pagination.itemCount"
          :on-update:page="handlePagination"
        >
        </n-pagination>
      </div>

    </n-space>
  </CommonPage>
  <n-modal style="width: 840px;" v-model:show="showModal" preset="card" title="新增">
    <template #header>
      <div>新增用户</div>
    </template>
    <n-form
      ref="formRef"
      :model="formModel"
      label-placement="top"
    >
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="12" label="用户名">
          <n-input v-model:value="formModel.username"></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="密码">
          <n-input v-model:value="formModel.password"></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="昵称">
          <n-input v-model:value="formModel.nickname"></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="姓名">
          <n-input v-model:value="formModel.fullname"></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="手机号">
          <n-input v-model:value="formModel.phone"></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="部门">
          <n-input v-model:value="formModel.department"></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="职位">
          <n-input v-model:value="formModel.department"></n-input>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="状态">
          <n-select
            v-model:value="formModel.status"
            placeholder="Select"
            :options="statusOptions"
          />
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="角色">
          <n-select
            v-model:value="formModel.role_id"
            placeholder="Select"
            :options="roleOptions"
            label-field="name"
            value-field="id"
          />
        </n-form-item-gi>
      </n-grid>

    </n-form>
    <template #action>
      <div style="display: flex;justify-content: flex-end;">
        <n-button @click="handleAdd" style="margin-right:10px;" strong secondary type="info">确认</n-button>
        <n-button @click="handleShowModalClose" style="margin-right:10px;" strong secondary type="tertiary">取消</n-button>
      </div>
    </template>
  </n-modal>
</template>